<template>
	<a-modal width="1050px" v-model:visible="visible" title="地图选择" @ok="handleOk">
		<baidu-map class="map" ak="VU0DMaNj9iJtLOnUA6zE5DyuUTmRXQYp"
				   v="3.0" type="API" :center="{lng: 105.603331, lat: 30.530429}"
				   :scroll-wheel-zoom="true"
				   @click="handelClick"
				   :zoom="10">
			<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
			<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
			<bm-marker :position="markPoint" :dragging="true" ></bm-marker>
		</baidu-map>
	</a-modal>
</template>

<script setup name="chooseMap">
	import { BaiduMap } from 'vue-baidu-map-3x'

	const map = ref(null)
	const centerPoint = ref([])
	const visible = ref(false)
	const markPoint = ref({})

	/**
	 * 添加点标记
	 * @param e
	 */
	const handelClick = (e) => {
		console.log(e.point.lat+"==handelClick==="+e.point.lng)
		markPoint.value = {lng: e.point.lng, lat: e.point.lat}
	}

	const showModal = (record) => {
		if (record) {
			centerPoint.value = [record.longitude, record.latitude]
		}
		visible.value = true;
	}
	const handleOk = e => {
		console.log(e)
		visible.value = false;
	}

	// 抛出函数
	defineExpose({
		showModal
	})
</script>
<style lang="less">
.map {
	width: 100%;
	height: 550px;
}
</style>
